<template>
    <view class="recyclingBinStyle">
        <view class="topWrap">
            <!-- <view style="padding: 30rpx 0rpx 0rpx 30rpx;" >
                <image src="./static/recyclingBin/leftWhiteArrow.svg" @click="goBack" style="width: 18rpx;height: 32rpx;" />
            </view> -->
            <view class="flex between" style="padding:46rpx 0 0 80rpx">
                <view class="tipTextStyle">
                    <view class="bigText">回收箱</view>
                    <view class="subText">资源暂存备份，方便找回</view>
                </view>
                <view>
                    <image src="./static/recyclingBin/recyclingBinIcon.svg" style="width: 348rpx;height: 216rpx;" />
                </view>
            </view>
        </view>
        <view class="bottomWrap">
            <view class="flex between">
                <u-input placeholder="请输入试题科目名称" prefixIcon="search"
                    prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
                    customStyle="border-radius: 24rpx; height: 60rpx;" @confirm="onSearch" v-model="searchValue"></u-input>
                <view class="flex flex-column center" style="margin-left: 54rpx;">
                    <text style="color: #37B874;font-size: 36rpx;">{{ countNum }}</text>
                    <text style="color: #666666;font-size: 24rpx;">回收数量</text>
                </view>
            </view>
            <scroll-view :scroll-y="true" class="scrollWrap"
                :style="{ marginTop: '40rpx', height: 'calc(100vh - 550rpx)' }">
                <view v-if="planList.length">
                    <view v-for="item in planList" :key="item.id" class="itemScStyle">
                        <view class="flex between ">
                            <view style="font-size: 32rpx;">{{ item.name || "--" }}</view>
                            <view class="center" @click="onRestore(item)">
                                <image src="./static/recyclingBin/restoreIcon.svg"
                                    style="width: 36rpx;height: 36rpx;" />
                                <text style="margin-left: 10rpx;font-size: 24rpx;">恢复</text>
                            </view>
                        </view>
                        <view style="margin-top: 66rpx;" class="v-center">
                            <image src="./static/recyclingBin/infoIcon.svg" style="width: 40rpx;height: 40rpx;" />
                            <text style="font-size: 24rpx;">共{{ item.itemNum || 0 }}道</text>
                        </view>
                    </view>
                    <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
                </view>
                <view v-else style="margin-top: 20%">
                    <u-empty text="暂无数据" mode="list"></u-empty>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { pageSubject, restore } from '../myQuestionBank/services/myQuestionBankService';
import { notificationFun } from '../utils/PrjUtils';
export default {
    name: 'recyclingBinPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            queryData: {
                queryKey: "",
                pageNo: 1,
                pageSize: 10,
                status:1,
            },
            // 新增题库名称
            quName: "",
            // 数据源
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            // 总数
            countNum: 0,
            // 搜索
            searchValue:""
        };
    },
    onShow() {
        if (uni.getStorageSync('appKey')) {
            this.loginData = {
                ...uni.getStorageSync('loginData'),
            };
        } else {
            this.loginData = {};
        }
        this.onRefresh()

    },
    onPullDownRefresh() {
    },
    onReachBottom() {

    },
    watch: {
        queryData: {
            handler: function (val, oldVal) {
                this.onGetListData(val)
            },
            deep: true
        }
    },
    methods: {
        // 刷新
        onRefresh() {
            this.queryData = { ...this.queryData, pageNo: 1 }
        },
        goBack() {
            uni.navigateBack()
        },
        // 初始化数据
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            pageSubject(queryData).then(res => {
                this.countNum = res.totalCount ?? 0
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
                pageNo: 1
            }
        },
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            // this.planList = [...this.planList, ...[2, 3, 4]]
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        onRestore(item) {
            restore(item.subjectUuid).then(res => {
                notificationFun("恢复成功！")
                this.onRefresh()
            })
        }
    },
    mounted() {
        // Add your mounted logic here

    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    computed: {

    }
};
</script>

<style scoped lang="scss">
.recyclingBinStyle {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;

    .topWrap {
        /* padding-top: 120rpx; */
        padding: 40rpx 0;
        background: linear-gradient(180deg, #37B874 0%, #18663D 100%);
        padding-bottom: 20rpx;

        .tipTextStyle {
            color: #fff;

            .bigText {
                font-size: 48rpx;
                font-weight: 500;
            }

            .subText {
                font-size: 28rpx;
                font-weight: 400;
                line-height: 52rpx;
            }
        }
    }

    .bottomWrap {
        flex: 1;
        border-radius: 24rpx 24rpx 0 0;
        position: relative;
        top: -20rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 56rpx 30rpx;

        .itemScStyle {
            padding: 28rpx 36rpx 20rpx 36rpx;
            border-radius: 24rpx;
            background-color: #f9f9f9;
            margin-bottom: 32rpx;

        }
    }

}
</style>